<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Title</title>
</head>
<body style="background-size:cover;background: url(bg.jpg)0 0; ">
<img src="hero.png" width="30%" id="hero" style="position: absolute;left: 50%;margin-left: -15%;bottom: 5%">
<audio src="bgm.mp3" autoplay="autoplay" loop="loop" preload="auto" controls="controls" ></audio>
</body>
<script>
    let audio=document.createElement("audio");
    audio.src="bgm.mp3";
    audio.loop="true";
    document.body.appendChild(audio);
    let y=0;
    function f() {
        y++;
        document.body.style.background="url(bg.jpg)0 "+y+"px";
        document.body.style["background-size"]="cover";
    }
    let bgTimer=setInterval(f,10);

    let bullets=[];
    var bid=0;
    function  sendBul() {
        let bullet=document.createElement("img");
        bullet.src="bullet.png";
        bullet.style.width = "6%";
        bullet.style.position = "absolute";
        bullet.style.left = "50%";
        bullet.style["margin-left"] = "-3%";
        bullet.style.bottom = "15%";
        bullet.id = "b"+bid++;

        bullets.push(bullet);
        document.body.appendChild(bullet);
    }
    let bulletTimer=setInterval(sendBul,300);

    function bullFly() {
        for (let i=0;i<bullets.length;i++){
            let b=bullets[i];
            b.style.bottom=(parseInt(b.style.bottom)+1)+"%";
            if(parseInt(b.style.bottom)>100){
                document.body.removeChild(b);
                bullets.splice(bullets.indexOf(b),1);
            }
        }
    }
    let bulletFly=setInterval(bullFly,10);
</script>
</html>